<template>
  <div v-loading="loading">
    <template v-if="this.userData.length>0">
      <el-form :inline="true" :model="search" class="demo-form-inline" @submit.native.prevent>
        <el-form-item label="姓名">
          <el-input v-model="search.name" placeholder="姓名" />
        </el-form-item>
        <el-form-item>
          <el-button @click="searchs">搜索</el-button>
        </el-form-item>
      </el-form>
      <el-table
        ref="table"
        row-key="id"
        :data="userData"
        tooltip-effect="dark"
        style="width: 100%"
        @selection-change="handleSelectionChange"
        @current-change="handleCurrentChange"
      >
        <el-table-column
          type="selection"
          width="55"
          :selectable="disableSelection"
          :reserve-selection="true"
        />
        <el-table-column prop="username" label="姓名" />
        <el-table-column label="部门" show-overflow-tooltip>
          <template slot-scope="scope">
            <span>
              {{ handleFiledByID(scope.row.fieldData,'valueType','department_id')?.name }}
            </span>
          </template>
        </el-table-column>
        <el-table-column prop="phone" label="状态">
          <template slot-scope="scope">
            <el-tag
              v-if="handleFiledByID(scope.row.fieldData,'content','job_status')==1"
              type="success"
            >在职</el-tag>
            <el-tag
              v-if="handleFiledByID(scope.row.fieldData,'content','job_status') == 0"
              type="info"
            >离职</el-tag>
          </template>
        </el-table-column>
      </el-table>
      <Pagination :total="total" :limit="pageParams.pageSize" :auto-scroll="false" @pagination="pagination" />
      <div class="checks" style="margin-top: 10px;">
        <span>已选择</span>
        <el-tag v-for="(item, key) in user" :key="key" type="info">{{ item.username }}</el-tag>
      </div>
    </template>
    <template v-else>
      <el-empty description="这里空空如也" />
    </template>
  </div>
</template>

<script>
import { getAllUser } from '@/api/v2/personnel'
import { getDormitory } from '@/api/basic'
import { handleFiledByID } from '@/utils/handleData'

import Pagination from '@/components/Pagination/index.vue'

export default {
  components: {
    Pagination
  },
  props: {

  },
  data() {
    return {
      loading: false,
      user: [],
      value: [],
      userData: [],
      search: {},
      currentRow: 0,
      userID: null,
      pageParams: {
        page: 1,
        pageSize: 10
      },
      total: 0
    }
  },
  created() {
    this.userID = this.$route.params.id
    this.getUserInfoAll()
  },
  beforeDestroy() {

  },
  methods: {
    check(data) {
      this.$emit('change', this.user)
    },
    searchs() {
      this.getUserInfoAll()
    },
    async getUserInfoAll() {
      this.loading = true
      const params = Object.assign(this.pageParams, { username: this.search.name, job_status: 1 })
      try {
        const { data, meta: { total }} = await getAllUser(params)
        this.userData = data
          .map(item => {
            return {
              ...item,
              disabled: handleFiledByID(item.fieldData, 'content', 'job_status') ==
               1 ? true : !(false || item.id === Number(this.userID))
            }
          })
        this.total = total
      } catch (e) {
        this.$message.error('获取用户信息失败')
      } finally {
        this.loading = false
      }
    },
    handleSelectionChange(data) {
      this.user = data
      if (data.length > 1) {
        this.$refs.table.clearSelection()
        this.$refs.table.toggleRowSelection(data[data.length - 1])
      }
      this.check()
    },
    handleCurrentChange(val) {
      this.$refs.table.toggleRowSelection(val)
    },
    pagination(val) {
      this.pageParams.page = val.page
      this.getUserInfoAll()
    },
    disableSelection(row) {
      return row.disabled
    },
    handleFiledByID,

    reset() {
      console.log('123 --------->', 123)
      this.pageParams = this.$options.data().pageParams
      this.search = this.$options.data().search
    }
  }
}
</script>
<style lang="scss" scoped>
.el-table-column--selection {
    .cell {
        display: none;
    }
}
::v-deep .pagination-container{
  padding: 0;
}
</style>
